<template>
  <Echart height="300px" width="100%" :options="options"/>
</template>

<script>
import Echart from '@/components/echart/index'
import resize from './mixins/resize'
export default {
  components: { Echart },
  mixins:[resize],
  props: {
    cdata: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
      options: {}
    }
  },
  watch: {
    cdata: {
      handler(newValue) {
        this.options = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
          },
          series: [
            {
              name: 'WEEKLY WRITE ARTICLES',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: newValue,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
